博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
kindEditor或中的图片粘贴处理
阅读量:5912 次
发布时间:2019-06-19

本文共 1988 字,大约阅读时间需要 6 分钟。

hot3.png

在使用kindEditor的时候,如果我们通过拷贝粘贴的方式将一个图片/截图文件粘贴到kindEditor中时,会在body部分生成如下一部分代码:

 

提交时,这部分内容会原封不动的提交到后台,写入数据库。通过查阅资料(),找到一种方式,在粘贴图片时,将图片上传,html中则只存放文件在服务区上保存的路径,提交到后台之后,则将文件路径写入数据库,读取时加载即可。如下所示:

其实不仅仅是kindEditor,其它场景下的图片拷贝都类似,可以采用上述方式来处理。在aftreCreate中为body绑定paste事件,拷贝时同时将图片内容发送给服务器,前台的代码如下所示:

var K = KindEditor;keEditor = K.create('#' + editorID,{    //......	afterCreate : function()	{		var doc = this.edit.doc; 		var cmd = this.edit.cmd; 		/* Paste in chrome.*/		if(K.WEBKIT)		{			K(doc.body).bind('paste', function(e)			{				var $this = $(this);				var original =  e.originalEvent;				var file =  original.clipboardData.items[0].getAsFile();				var reader = new FileReader();				reader.onload = function (event) 				{					var result = event.target.result;					var arr = result.split(",");					var data = arr[1]; // raw base64					var contentType = arr[0].split(";")[0].split(":")[1];					html = '';					$.post("imageUpload", editor: html, function(data)					{						if(data) return cmd.inserthtml(data);						alert(v.errorUnwritable);						return cmd.inserthtml(html);					});				};				reader.readAsDataURL(file);			});		}		/* Paste in firefox or IE.*/		if(K.GECKO || K.IE)		{			K(doc.body).bind('paste', function(ev)			{				setTimeout(function()				{					var html = K(doc.body).html();					if(html.search(/

在后端,我们需要响应ajax请求,并返回一个图片存放的路径和文件名,代码如下所示(PHP):

public function pasteImage($data){	$data = str_replace('\"', '"', $data);	ini_set('pcre.backtrack_limit', strlen($data));		/* 根据特征匹配图片内容 */	preg_match_all('//U', $data, $out);	foreach($out[3] as $key => $base64Image)	{	    /* 解密内容 */		$imageData = base64_decode($base64Image);				$extension   = $out[2][$key];				/* 根据key和扩展名生成一个文件名称 */		$pathname    = $this->setPathName($key, extension);				/* 保存文件 */		file_put_contents($this->tmpPath . $pathname, $imageData);		/* 将data:image....的内容替换为文件路径 */		$data = str_replace($out[1][$key], $this->webDataPath . $pathname, $data);	}	return $data;}

转载于:https://my.oschina.net/ricky716/blog/467894

你可能感兴趣的文章
去 IOE,MySQL 完胜 PostgreSQL
查看>>
++i 和 i++ 性能上的区别
查看>>
Mysql运维管理-一主多从宕机从库切换主库继续和从库同步过程16
查看>>
Tomcat优化之配置NIO运行模式
查看>>
用XSLT和XML改进Struts
查看>>
WEB测试—功能测试
查看>>
在react或vue中,for循环用Index作为key值是好还是坏呢?
查看>>
2014.10.1 Form中显示pdf文件
查看>>
NERDTree 快捷键辑录
查看>>
Python数据分析Numpy库方法简介(一)
查看>>
javaWeb:相关监听方法汇总
查看>>
JSP 实现 之 读取数据库显示图片
查看>>
JS——特效秀
查看>>
Beta冲刺——day6
查看>>
前端:CheckBox事件函数js
查看>>
Comet OJ - Contest #3 题解
查看>>
[网络流24题-9]试题库问题
查看>>
jquery选择器详解
查看>>
C# 保留2位小数
查看>>
使用xshell远程连接Linux
查看>>